<template>
	<v-touch @swipeleft="swiperleft" @swiperight="swiperright" @swipeup="swiperup" @swipedown="swiperdown" class="wrapper">
		<div class="top">
			<Button type="primary" @click="refresh()">重玩</Button>
			<span style="font-size: 20px;margin-left: 10px;color: red">分数:{{conunta}}</span>
		</div>
		<div class="jiu" :style="{height: contentWidth+'px', width: contentWidth+'px', padding: '15px'}">
			<div class="grid-cell" id="grid-cell-0-0" :style="{height: itemWidth+'px', width: itemWidth+'px', margin: '10px'}">
				<div class="cell" v-if="a00" :style="{lineHeight: itemWidth+'px'}">{{a00}}</div>
			</div>
			<div class="grid-cell" id="grid-cell-0-1" :style="{height: itemWidth+'px', width: itemWidth+'px', margin: '10px'}">
				<div class="cell" v-if="a01" :style="{lineHeight: itemWidth+'px'}">{{a01}}</div>
			</div>
			<div class="grid-cell" id="grid-cell-0-2" :style="{height: itemWidth+'px', width: itemWidth+'px', margin: '10px'}">
				<div class="cell" v-if="a02" :style="{lineHeight: itemWidth+'px'}">{{a02}}</div>
			</div>
			<div class="grid-cell" id="grid-cell-0-3" :style="{height: itemWidth+'px', width: itemWidth+'px', margin: '10px'}">
				<div class="cell" v-if="a03" :style="{lineHeight: itemWidth+'px'}">{{a03}}</div>
			</div>

			<div class="grid-cell" id="grid-cell-1-0" :style="{height: itemWidth+'px', width: itemWidth+'px', margin: '10px'}">
				<div class="cell" v-if="a10" :style="{lineHeight: itemWidth+'px'}">{{a10}}</div>
			</div>
			<div class="grid-cell" id="grid-cell-1-1" :style="{height: itemWidth+'px', width: itemWidth+'px', margin: '10px'}">
				<div class="cell" v-if="a11" :style="{lineHeight: itemWidth+'px'}">{{a11}}</div>
			</div>
			<div class="grid-cell" id="grid-cell-1-2" :style="{height: itemWidth+'px', width: itemWidth+'px', margin: '10px'}">
				<div class="cell" v-if="a12" :style="{lineHeight: itemWidth+'px'}">{{a12}}</div>
			</div>
			<div class="grid-cell" id="grid-cell-1-3" :style="{height: itemWidth+'px', width: itemWidth+'px', margin: '10px'}">
				<div class="cell" v-if="a13" :style="{lineHeight: itemWidth+'px'}">{{a13}}</div>
			</div>

			<div class="grid-cell" id="grid-cell-2-0" :style="{height: itemWidth+'px', width: itemWidth+'px', margin: '10px'}">
				<div class="cell" v-if="a20" :style="{lineHeight: itemWidth+'px'}">{{a20}}</div>
			</div>
			<div class="grid-cell" id="grid-cell-2-1" :style="{height: itemWidth+'px', width: itemWidth+'px', margin: '10px'}">
				<div class="cell" v-if="a21" :style="{lineHeight: itemWidth+'px'}">{{a21}}</div>
			</div>
			<div class="grid-cell" id="grid-cell-2-2" :style="{height: itemWidth+'px', width: itemWidth+'px', margin: '10px'}">
				<div class="cell" v-if="a22" :style="{lineHeight: itemWidth+'px'}">{{a22}}</div>
			</div>
			<div class="grid-cell" id="grid-cell-2-3" :style="{height: itemWidth+'px', width: itemWidth+'px', margin: '10px'}">
				<div class="cell" v-if="a23" :style="{lineHeight: itemWidth+'px'}">{{a23}}</div>
			</div>

			<div class="grid-cell" id="grid-cell-3-0" :style="{height: itemWidth+'px', width: itemWidth+'px', margin: '10px'}">
				<div class="cell" v-if="a30" :style="{lineHeight: itemWidth+'px'}">{{a30}}</div>
			</div>
			<div class="grid-cell" id="grid-cell-3-1" :style="{height: itemWidth+'px', width: itemWidth+'px', margin: '10px'}">
				<div class="cell" v-if="a31" :style="{lineHeight: itemWidth+'px'}">{{a31}}</div>
			</div>
			<div class="grid-cell" id="grid-cell-3-2" :style="{height: itemWidth+'px', width: itemWidth+'px', margin: '10px'}">
				<div class="cell" v-if="a32" :style="{lineHeight: itemWidth+'px'}">{{a32}}</div>
			</div>
			<div class="grid-cell" id="grid-cell-3-3" :style="{height: itemWidth+'px', width: itemWidth+'px', margin: '10px'}">
				<div class="cell" v-if="a33" :style="{lineHeight: itemWidth+'px'}">{{a33}}</div>
			</div>
		</div>
	</v-touch>
</template>

<script>
	export default {
		name: 'Game',
		data() {
			return {
				contentWidth: 0,
				itemWidth: 0,
				arryList: [2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048],
				timeInterval: true,
				a00: "",
				a01: "",
				a02: "",
				a03: "",
				a10: "",
				a11: "",
				a12: "",
				a13: "",
				a20: "",
				a21: "",
				a22: "",
				a23: "",
				a30: "",
				a31: "",
				a32: "",
				a33: ""
			}
		},
		computed: {
			conunta: function() { //记录总分数

				var aa = (this.a00 == "" ? 0 : parseInt(this.a00)) + (this.a01 == "" ? 0 : parseInt(this.a01)) + (this.a02 == "" ?
						0 : parseInt(this.a02)) + (this.a03 == "" ? 0 : parseInt(this.a03)) +
					(this.a10 == "" ? 0 : parseInt(this.a10)) + (this.a11 == "" ? 0 : parseInt(this.a11)) + (this.a12 == "" ? 0 :
						parseInt(this.a12)) + (this.a13 == "" ? 0 : parseInt(this.a13)) +
					(this.a20 == "" ? 0 : parseInt(this.a20)) + (this.a21 == "" ? 0 : parseInt(this.a21)) + (this.a22 == "" ? 0 :
						parseInt(this.a22)) + (this.a23 == "" ? 0 : parseInt(this.a23)) +
					(this.a30 == "" ? 0 : parseInt(this.a30)) + (this.a31 == "" ? 0 : parseInt(this.a31)) + (this.a32 == "" ? 0 :
						parseInt(this.a32)) + (this.a33 == "" ? 0 : parseInt(this.a33));
				return aa;
			}
		},
		methods: {
			generate() { //随机生成一个2或4的格子
				let c3 = (Math.random() * 3).toFixed(0);
				let c4 = (Math.random() * 3).toFixed(0);
				let random = Math.random().toFixed(1);
				// let b=this.isEnd();
				if (this["a" + c3 + c4]) {
					this.generate();
				} else {
					this["a" + c3 + c4] = this.arryList[random > 0.6 ? 1 : 0];
				}
			},
			isEnd() { //判断是否存在空的格子
				let b = false;
				for (let i = 0; i < 4; i++) {
					for (let j = 0; j < 4; j++) {
						if (this["a" + i + j] == "") {
							b = true;
						}
					}
				}
				return b;
			},
			refresh() { //刷新重玩
				for (let i = 0; i < 4; i++) {
					for (let j = 0; j < 4; j++) {
						this["a" + i + j] = "";
					}
				}
				let c1 = (Math.random() * 3).toFixed(0);
				let c2 = (Math.random() * 3).toFixed(0);
				let random = Math.random().toFixed(1);;
				this["a" + c1 + c2] = this.arryList[random > 0.6 ? 1 : 0];
				this.generate();
			},
			time() { //做限制 防止快速连击
				this.timeInterval = false;
				let logintimeOut = setInterval(() => {
					this.timeInterval = true;
					clearInterval(logintimeOut);
				}, 1000 * 0.2);
			},
			reghtUp() { //点击右键事件
				let b = false;
				if (this.isEnd()) {
					for (let i = 0; i < 4; i++) {
						for (let j = 2; j > -1; j--) {
							for (let k = 3; k > j; k--) { //k为落子点坐标
								if (this["a" + i + j]) { //如果要跳转的格子为空 那就跳过
									if (this["a" + i + k] == "" && this.noBlockHorizontal(i, j, k)) { //如果落子点为空的格子并且中间没障碍物则可落子
										this.time();
										b = true;
										this["a" + i + k] = this["a" + i + j]; //格子赋值
										this["a" + i + j] = "";
									} else if (this["a" + i + k] == this["a" + i + j] && this.noBlockHorizontal(i, j, k)) {
										this.time();
										b = true;
										let a = parseInt(this["a" + i + k]) + parseInt(this["a" + i + j]);
										this["a" + i + k] = a;
										this["a" + i + j] = "";
									}
								}
							}
						}

					}
				} else {
					console.log("游戏结束您的分数是：" + this.conunta);
				}
			},
			bottomUp() {
				let b = false;
				if (this.isEnd()) {
					for (let i = 0; i < 4; i++) { //i为x轴j为y轴
						for (let j = 2; j > -1; j--) { //从第二排开始
							for (let k = 3; k > j; k--) {
								if (this["a" + j + i]) {
									if (this["a" + k + i] == "" && this.toBlockHorizontal(i, j, k)) { //判断
										this.time();
										b = true;
										this["a" + k + i] = this["a" + j + i];
										this["a" + j + i] = "";
									} else if (this["a" + k + i] == this["a" + j + i] && this.toBlockHorizontal(i, j, k)) {
										this.time();
										b = true;
										let a = parseInt(this["a" + k + i]) + parseInt(this["a" + j + i]);
										this["a" + k + i] = a;
										this["a" + j + i] = "";
									}
								}
							}
						}
					}
				} else {
					console.log("游戏结束您的分数是：" + this.conunta);
				}
				return b;
			},
			topUp() {
				let b = false;
				if (this.isEnd()) {
					for (let i = 0; i < 4; i++) { //i为x轴j为y轴
						for (let j = 1; j < 4; j++) { //从第二排开始
							for (let k = 0; k < j; k++) {
								if (this["a" + j + i]) {
									if (this["a" + k + i] == "" && this.toBlockHorizontal(i, k, j)) { //判断
										this.time();
										b = true;
										this["a" + k + i] = this["a" + j + i];
										this["a" + j + i] = "";
									} else if (this["a" + k + i] == this["a" + j + i] && this.toBlockHorizontal(i, k, j)) {
										this.time();
										b = true;
										let a = parseInt(this["a" + k + i]) + parseInt(this["a" + j + i]);
										this["a" + k + i] = a;
										this["a" + j + i] = "";
									}
								}
							}
						}
					}
				} else {
					console.log("游戏结束您的分数是：" + this.conunta);
				}
				return b;
			},
			leftUp() {
				let b = false;
				if (this.isEnd()) {
					for (let i = 0; i < 4; i++) {
						for (let j = 1; j < 4; j++) {
							for (let k = 0; k < j; k++) {
								if (this["a" + i + j]) {
									if (this["a" + i + k] == "" && this.noBlockHorizontal(i, k, j)) { //判断
										this.time();
										b = true;
										this["a" + i + k] = this["a" + i + j];
										this["a" + i + j] = "";
									} else if (this["a" + i + k] == this["a" + i + j] && this.noBlockHorizontal(i, k, j)) {
										this.time();
										b = true;
										let a = parseInt(this["a" + i + k]) + parseInt(this["a" + i + j]);
										this["a" + i + k] = a;
										this["a" + i + j] = "";
									}
								}
							}
						}

					}
				} else {
					console.log("游戏结束您的分数是：" + this.conunta);
				}
				return b;
			},

			swiperleft() {
				if (this.leftUp()) { //移动之后新生成一个格子
					this.generate();
				}
			},
			swiperright() {
				if (this.reghtUp()) { //移动之后新生成一个格子
					this.generate();
				}
			},
			swiperup() {
				if (this.topUp()) { //移动之后新生成一个格子
					this.generate();
				}
			},
			swiperdown() {
				if (this.bottomUp()) { //移动之后新生成一个格子
					this.generate();
				}
			},
			monitor(_this) {
				window.onkeydown = function(e) { //监听键盘事件
					console.log(e.keyCode);
					if (_this.timeInterval) {
						switch (e.keyCode) {
							case 37:
								if (_this.leftUp()) { //移动之后新生成一个格子
									_this.generate();
								}
								break;
							case 38:
								if (_this.topUp()) {
									_this.generate();
								}
								break;
							case 39:
								if (_this.reghtUp()) {
									_this.generate();
								}
								break;
							case 40:
								if (_this.bottomUp()) {
									_this.generate();
								}
								break;

						}
					}

				}
			},

			noBlockHorizontal(row, col1, col2) { //判断x轴中间是否有障碍物
				for (var i = col1 + 1; i < col2; i++)
					if (this["a" + row + i])
						return false;
				return true;
			},
			toBlockHorizontal(row, col1, col2) { //判断y轴中间是否有障碍物
				for (var i = col1 + 1; i < col2; i++)
					if (this["a" + i + row])
						return false;
				return true;
			}
		},
		mounted() { //初始化随机生成两个格子
			let c1 = (Math.random() * 3).toFixed(0);
			let c2 = (Math.random() * 3).toFixed(0);
			let random = Math.random().toFixed(1);;
			this["a" + c1 + c2] = this.arryList[random > 0.6 ? 1 : 0];
			this.generate();
			// this.monitor(this); // 监听键盘上下左右事件
			let bodyWidth = document.body.clientWidth;
			let padding = 15; // 假设 2048 padding = 15px
			let margin = 10; // 假设 2048 单元格 margin = 10px
			this.contentWidth = bodyWidth - 15 * 2;
			this.itemWidth = (this.contentWidth-margin*8) / 4
			console.log(this.contentWidth)
			console.log(this.itemWidth)
		}
	}
</script>

<style>
	.wrapper {
		height: 100%; width: 100%;
		overflow: hidden;
	}
	.top {
		margin: 10px;
	}

	.jiu {
		background: #ecdede;
		width: 500px;
		height: 500px;
		margin: auto;
		/* top: 100px; */

		padding: 10px;
	}

	.grid-cell {
		background: #c3bcae;
		float: left;
		border-radius: 15%;
	}

	.cell {
		width: 100%;
		height: 100%;
		text-align: center;
		background: coral;
		border-radius: 15%;
		font-size: 40px;
		color: white;
		font-weight: bold;
	}
</style>
